<section class="rule-item">
  <div class="tip" *ngIf="isFirst; else andTemplate;" i18n="@@core.components.findrule.if">If</div>
  <ng-template #andTemplate>
    <div class="tip" i18n="@@core.components.findrule.and">and</div>
  </ng-template>
  <div class="select">
    <nz-select
      class="nz-select-36"
      nzShowSearch
      nzServerSearch
      nzPlaceHolder="Select property"
      i18n-nzPlaceHolder="@@core.components.findrule.rule.selectuserproperty"
      (nzOnSearch)="onSearchProperty($event)"
      [(ngModel)]="selectedProp"
      (ngModelChange)="onPropertyChange()">
      <nz-option nzCustomContent *ngFor="let userProp of filteredProps" [nzValue]="userProp" [nzLabel]="userProp.name">
        <div class="user-selection-item" [class]="{'creation-selection-item': userProp.isNew}">
          <div class="title">
            <ng-container *ngIf="userProp.isNew" i18n="@@common.create-with-comma">Create:</ng-container> {{ userProp.name }}
          </div>
        </div>
      </nz-option>
    </nz-select>
  </div>
  <div class="select" *ngIf="!isSegmentRule">
    <nz-select
      class="nz-select-36"
      nzPlaceHolder="Select operation"
      i18n-nzPlaceHolder="@@core.components.findrule.rule.select-operation"
      nzShowSearch
      [(ngModel)]="condition.op"
      (ngModelChange)="onOperationChange()">
      <nz-option *ngFor="let rule of ruleValueConfig" [nzValue]="rule.value" [nzLabel]="rule.label"></nz-option>
    </nz-select>
  </div>
  <div class="target-flex-rule-container" *ngIf="!isSegmentRule && condition.type">
    <ng-container [ngSwitch]="condition.type" >
      <ng-template #presetSelect>
        <nz-select class="nz-select-36 target-flex-rule-select" style="min-width: 200px" nzShowSearch
                   nzPlaceHolder="values"
                   i18n-nzPlaceHolder="@@core.components.findrule.rule.selectvalues"
                   [(ngModel)]="condition.value" (ngModelChange)="onDebounceTimeModelChange()">
          <nz-option
            *ngFor="let presetValue of currentUserProp.presetValues"
            [nzLabel]="presetValue.description"
            [nzValue]="presetValue.value">
          </nz-option>
        </nz-select>
      </ng-template>
      <ng-container *ngSwitchCase="'string'">
        <div class="value" *ngIf="!currentUserProp.usePresetValuesOnly; else presetSelect">
          <input class="standard-bordered-input" nz-input [(ngModel)]="condition.value" (ngModelChange)="onDebounceTimeModelChange()"
                 placeholder="input string or number"
                 i18n-placeholder="@@core.components.findrule.rule.pleaseinput" />
        </div>
      </ng-container>
      <ng-container *ngSwitchCase="'number'">
        <div class="value" *ngIf="!currentUserProp.usePresetValuesOnly; else presetSelect">
          <nz-input-number class="standard-bordered-input" [(ngModel)]="condition.value" (ngModelChange)="onDebounceTimeModelChange()" nzPlaceHolder="input a number"
                           i18n-nzPlaceHolder="@@core.components.findrule.rule.inputnumber"></nz-input-number>
        </div>
      </ng-container>
      <ng-container *ngSwitchCase="'regex'">
        <div class="value" *ngIf="!currentUserProp.usePresetValuesOnly; else presetSelect">
          <input class="standard-bordered-input" nz-input [(ngModel)]="condition.value" (ngModelChange)="onDebounceTimeModelChange()" placeholder="Eg. ^foo$"/>
        </div>
      </ng-container>
      <ng-container *ngSwitchCase="'multi'">
        <div class="value">
          <nz-select
            class="nz-select-36 target-flex-rule-select"
            style="min-width: 200px"
            [nzMode]="multiSelectMode"
            nzPlaceHolder="values"
            i18n-nzPlaceHolder="@@core.components.findrule.rule.selectvalues"
            nzShowSearch
            [(ngModel)]="condition.multipleValue"
            (ngModelChange)="onModelChange()">
            <nz-option
              *ngFor="let presetValue of currentUserProp.presetValues"
              [nzLabel]="presetValue.description"
              [nzValue]="presetValue.value">
            </nz-option>
          </nz-select>
        </div>
      </ng-container>
    </ng-container>
  </div>
  <ng-container *ngIf="isSegmentRule">
    <div class="value">
      <div>
        <nz-select
          class="nz-select-36"
          style="min-width: 200px;"
          nzMode="multiple"
          nzPlaceHolder="segments"
          i18n-nzPlaceHolder="@@core.components.findrule.rule.segments"
          nzShowSearch
          nzAllowClear
          nzServerSearch
          [(ngModel)]="condition.multipleValue"
          [nzMaxTagPlaceholder]="omittedPlaceHolder"
          [nzMaxTagCount]="2"
          (ngModelChange)="onModelChange()"
          [nzCustomTemplate]="multipleTemplate"
          (nzFocus)="onSearchSegments('')"
          (nzOnSearch)="onSearchSegments($event)">
            <ng-container *ngFor="let item of segments;">
              <nz-option *ngIf="!isLoadingSegments" nzCustomContent [nzValue]="item.id" [nzLabel]="item.name">
                <div class="segment-option-item">
                  <span [ngClass]="{'text-overflow': item.type === SegmentType.Shared}">{{ item.name }}</span>
                  <nz-tag *ngIf="item.type === SegmentType.Shared" nzColor="#23AD7F">
                    <span i18n="@@segment.shared">Shared</span>
                  </nz-tag>
                </div>
              </nz-option>
            </ng-container>
            <ng-template #multipleTemplate let-selected>
              <div class="ant-select-selection-item-content">
                {{ selected.nzLabel }}
              </div>
            </ng-template>
            <nz-option *ngIf="isLoadingSegments" nzDisabled nzCustomContent>
                <i nz-icon nzType="loading" class="loading-icon"></i> Loading Data...
            </nz-option>
        </nz-select>
      </div>
    </div>
  </ng-container>
  <ng-template #omittedPlaceHolder>
    <div class="ant-select-selection-item-content"
         nz-popover="total options"
         i18n-nz-popover="@@core.components.findrule.rule.alloptions"
         [nzPopoverContent]="allSelectedItems" nzPopoverOverlayClassName="selected-items-popover">
    <span class="more-select-selection-item">
      {{ condition.multipleValue.length }}
      <i nz-icon nzType="expand"></i>
    </span>
      <ng-template #allSelectedItems>
        <div class="more-select-items">
          <span class="more-select-item-content" *ngFor="let value of condition.multipleValue;">
            <span class="more-select-item-content-text" [nz-tooltip]="getValueDescription(value)">{{ getValueDescription(value) }}</span>
            <i (click)="onRemoveMultiValue(value)" nz-icon nzType="close"></i>
          </span>

        </div>
      </ng-template>
    </div>
  </ng-template>
  <div class="operator">
    <i nz-icon nzType="icons:icon-add-outline" *ngIf="isLast" (click)="addRule.emit()"></i>
    <i nz-icon nzType="icons:icon-minus-outline" (click)="deleteRule.emit()"></i>
  </div>
</section>


